<template>
  <div class="container">

    <div style="display: flex;align-items: center;justify-content:space-between">
      <div style="margin: 10px">
        <el-button @click="Back" type="primary" icon="el-icon-back" circle></el-button>
      </div>

      <div style="margin-right: 8%">
        <el-button @click="refreDataList" class="refer" type="primary">点我刷新</el-button>
      </div>
    </div>


    <div style="display:flex;">

      <!--      视频监控-->
      <div class="container-box">
        <!--      视频监控-->
        <div class="container-item" v-for="(item,index) in dataList" :key="index">
          <!--        视频播放器-->
          <div v-if="!isRef" :id="'player-container-'+index" style="width: 420px;height: 260px">
          </div>
          <!--        end-->
          <div class="container-item-botton">
            <div class="container-item-user">
              <div>{{ item.users ? item.users.name : '' }}</div>
              <div>
                <img
                    :src="item.users ? item.users.heard : ''"
                    style="border-radius: 100%;height: 50px;width: 50px">
              </div>
            </div>
            <div class="container-item-title">
              <div>考试科目:{{ item.OfficeClass ? item.OfficeClass.title : '未知' }}</div>
              <div style="margin-left: 5px">考试批次：{{ item.exam_id }}</div>
            </div>
            <div class="container-item-button">
              <el-popover placement="top-start" title="发送信息给当前学员" width="260" trigger="hover">
                <div class="" style="display: flex;">
                  <el-input size="mini" clearable v-model="sendInfo" placeholder="请输入内容"></el-input>
                  <el-button @click='sendMsg(item)' style="margin-left: 4px;" size="mini" type="text">发送</el-button>
                </div>
                <el-button slot="reference" size="small" type="primary"><i
                    class="el-icon-edit"></i>喊话
                </el-button>
              </el-popover>
              <el-button @click="tuchVideo(index)" style="margin-left: 10px;" size="small" type="info"><i
                  class="el-icon-s-promotion"></i>全屏
              </el-button>
              <el-popover style="margin-left: 10px;" placement="top-start" title="请输入备注" width="200"
                          trigger="click">
                <div class="" style="display: flex;">
                  <el-input size="mini" clearable v-model="examRemack" placeholder="终止考试备注"></el-input>
                  <el-button @click='terminationExamConfing(item,index)' style="margin-left: 4px;" size="mini"
                             type="text">确定
                  </el-button>
                </div>
                <el-button slot="reference" size="small" type="danger"><i class="el-icon-error"></i>终止考试
                </el-button>
              </el-popover>

              <div @click="refre(item,index)" style="margin-top: 10px">
                <i class="el-icon-refresh"></i>
              </div>
            </div>
          </div>
        </div>
        <!--      end-->

      </div>
      <!--      end-->

      <!--      异常提示-->
      <div class="container-right">
        <div style="display: flex;align-items: center;width: 100%;margin: 10px 10px">
          <el-input v-model="search" placeholder="请输入搜索内容"></el-input>
          <el-button style="margin-left: 5px;" icon="el-icon-search" circle></el-button>
        </div>
        <div class="container-right-title">
          异常人员名单
        </div>
        <div v-for="(item,index) in rollList" :key="index" class="container-right-item">
          <el-popover
              @show="onshowUser(item)"
              placement="left-end"
              width="200"
              trigger="hover"
          >
            <div v-for="(t,i) in rollUserlist" :key="i"
                 style="display: flex;align-items: center;justify-content: space-around">
              <div style="width: 80%;margin-bottom: 5px">
                {{ t.illegal ? t.illegal : '加载中...' }}
              </div>
              <div>
                {{ formatTime(t.create_time) }}
              </div>
            </div>
            <div @dblclick="shishiClick(item)" slot="reference">
              <img style="height: 50px;width: 50px;border-radius: 100%"
                   :src="item.user_image">
            </div>
          </el-popover>

          <div>
            {{ item.user_name }}
          </div>
          <div>
            <el-button @click="deleteItem(item)" type="danger" icon="el-icon-delete" circle></el-button>
          </div>

        </div>
      </div>
      <!--      end-->
    </div>

    <!--        分页-->
    <div style="margin-bottom: 20px">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
    <!--        end-->
  </div>
</template>

<script>
let palyData = [];
let ws;
export default {
  props: {
    dataObj: {
      type: Object,
      default: Object
    }
  },
  data() {
    return {
      isRef: false, //是否刷新
      exam: {},
      dataList: [],//当前正在考试列表
      search: '',
      examRemack: '',
      sendInfo: '',
      rollList: [], // 异常人员名单
      rollUserlist: [], //异常人员详细异常记录
    }
  },
  watch: {
    dataObj: {
      handler: function (val) {
        this.exam = val;
        this.examPerson(val.id);
      },
      immediate: true,
      deep: true
    }
  },
  methods: {


    /**
     * 格式化时间戳
     * @param time
     * @returns {string}
     */
    formatTime: function (time) {
      if (time) return this.$dayjs(time).format('H:m');
    },

    /**
     * 刷新数据列表
     */
    refreDataList: function () {
      this.isRef = true;
      this.$store
          .dispatch("exam/examPerson", {
            website_id: 1,
            list: true,
            exam_id: this.exam.id
          })
          .then((res) => {
            this.isRef = false;
            const {data} = res.data;
            Promise.all(this.dataList = data).then(() => {
              this.createVide();
            })
            this.$message.success('请求成功！');

          });
    },

    /**
     * 获取当前考试批次的异常人员名单
     */
    getExamTryRoll: function (idcard) {
      this.rollUserlist = [];
      this.$store
          .dispatch("exam/getExamTryRoll", {
            website_id: 1,
            idcard: idcard,
            exam_id: this.exam.id
          })
          .then((res) => {
            const {data} = res;
            if (idcard) return this.rollUserlist = data;
            // 去重
            this.rollList = this.unique(data);
          });
    },

    /**
     * 去重
     * @param arr
     * @returns {*}
     */
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.idcard) && res.set(arr.idcard, 1));
    },

    /**
     * 查询当前考试人数
     */
    examPerson: function (id) {
      this.$store
          .dispatch("exam/examPerson", {
            website_id: 1,
            list: true,
            exam_id: id
          })
          .then((res) => {
            const {data} = res.data;
            Promise.all(this.dataList = data).then(() => {
              this.createVide();
            })
          });
    },

    Back: function () {
      this.$emit('back');
    },

    /**
     * 双击头像监听
     */
    shishiClick: function (item) {
      console.log(item)
    },

    /**
     * 点击移除移除用户
     */
    deleteItem: function () {

    },


    /**
     * 监听鼠标悬浮
     * @param item
     */
    onshowUser: function (item) {
      this.getExamTryRoll(item.idcard);
    },

    /**
     * 控制视频全屏
     * @param index
     */
    tuchVideo: function (index) {
      palyData[index].fullscreen(true);
    },
    refre: function (item, index) {
      palyData[index].load(`http://livepull.jsonbug.com/live/${item.idcard + item.exam_id}.m3u8`);
    },
    sendMsg: function (item) {
      if (this.sendInfo == '') return this.$message.error('请输入内容！');
      let obj = {
        type: 'popupMsg',
        msg: this.sendInfo,
        to: item.idcard
      }
      ws.send(JSON.stringify(obj))
      this.sendInfo = '';
      this.$message.success('发送成功！')

    },
    terminationExamConfing: function (item) {
      if (this.examRemack == '') return this.$message.error('请输入备注');
      let obj = {
        type: 'over',
        msg: this.examRemack,
        to: item.idcard
      }
      ws.send(JSON.stringify(obj))
      this.examRemack = '';
      this.$message.success('发送成功！')
    },

    /**
     * 创建视频播放器
     */
    createVide: function () {
      for (let i = 0; i < this.dataList.length; i++) {
        let player = new TcPlayer(`player-container-${i}`, {
          // "webrtc": `webrtc://livepull.jsonbug.com/live/${this.dataList[i].idcard + this.dataList[i].exam_id}`, //请替换成实际可用的播放地址
          "m3u8": `http://livepull.jsonbug.com/live/${this.dataList[i].idcard + this.dataList[i].exam_id}.m3u8`, //请替换成实际可用的播放地址
          "autoplay": false,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
          "width": '420',
          "height": '260'
        });
        palyData.push(player);
      }
    },
    socket: function () {
      let _this = this;
      ws = new WebSocket("wss://api.jsonbug.com/wss")
      ws.onmessage = function (res) {

        let data = eval('(' + res.data + ')');
        switch (data.type) {
          case 'init':
            let obj = {
              type: 'bind',
              userId: 168,
            }
            ws.send(JSON.stringify(obj))
            break;
          case 'popupMsg':
            console.log(data)
            break;
        }
      }
      ws.onclose = function (res) {
        setTimeout(() => {
          _this.socket();
        }, 3000)
      }
    }

  },
  created() {
    this.socket();
    this.getExamTryRoll();
  },
  mounted() {

  }

}
</script>

<style scoped lang="scss">
.refer:hover {
  opacity: .6;
}

.refer:active {
  opacity: 1;
}

.container {
  .container-right {
    width: 20vw;
    border: 1px solid darkgray;
    height: 100vh;
    overflow-y: scroll;

    .container-right-item {

      display: flex;
      font-weight: bold;
      align-items: center;
      padding: 10px;
      justify-content: space-between;
      background-color: #e04b4b;
      color: gainsboro;
      margin: 10px;
      border-radius: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }

    .container-right-title {
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      background-color: darkgray;
      height: 50px;
      line-height: 50px;
      color: gainsboro;
    }
  }

  .container-box {
    width: 80vw;
    display: flex;
    flex-wrap: wrap;


    .container-item {
      margin-right: 10px;
      margin-bottom: 10px;

      .container-item-botton {
        height: 170px;
        border: 1px gainsboro solid;

        .container-item-user {
          display: flex;
          justify-content: space-around;
          padding: 5px;
          align-items: center;
          font-size: 16px;
          font-weight: bold;
        }

        .container-item-title {
          padding: 10px;
          font-weight: bold;
          display: flex;
          justify-content: space-around;
        }

        .container-item-button {
          margin-top: 20px;
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>
